<template>
	<view class="content">
		<topBox :buttonShow="false"></topBox>
		<!-- <view class="tips">
			聘到一个员工给400块钱。每个工人上班一小时，提成2块钱，年底请大家KTV,人只要带到工厂交给小王（138XXXX12456)就可以了。
		</view> -->
		<view class="list-wrap">
			<view class="bottom">
				<u-form :model="subForm" ref="subForm">
					<u-form-item label="联系电话" label-width="100px" prop="link_tel" required>
						<u-input border type="text" v-model="subForm.link_tel" />
					</u-form-item>
					<u-form-item label="招聘要求总结及补充" label-width="100px" prop="content" required>
						<u-input border auto-height type="textarea" maxlength="-1" v-model="subForm.content" />
					</u-form-item>
					<!-- <u-form-item label="岗位状态" prop="recruit_status" label-width="100px">
						<u-radio-group v-model="subForm.recruit_status">
							<u-radio name="1">下架</u-radio>
							<u-radio name="2">上架</u-radio>
						</u-radio-group>
					</u-form-item> -->
				</u-form>

			</view>
			<view class="list-item">
				<view class="item-title">
					<text class="name">
						{{ form.recruit_type_work }}
					</text>
					<text class="price">{{ form.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">具体要求：</text>
						<view class="txt-con">{{ form.recruit_requirement }}</view>
					</view>
					<view class="flex-row">
						<!-- <view class="row">
							<view>
								应聘人数：
								<text class="light">{{ form.recruit_user_num }}/{{ form.recruit_user_num }}</text>
							</view>
							<view>
								分享：
								<text class="light">{{ form.recruit_share_num }}</text>
							</view>
						</view> -->
						<view class="row">
							<view class="status">
								<text>状态：</text>
								<text v-if="form.recruit_status == 2">发布</text>
								<text v-if="form.recruit_status == 1">下架</text>
							</view>
						</view>
					</view>
					<view class="con-row">
						<text class="txt">留言：</text>
						<view class="txt-con">{{ form.recruit_content || ''}}</view>
					</view>
					<view class="flex">
						<view class="img-box">
							<image v-for="picitem in form.recruit_pic" :key="picitem.images_id" class="img"
								:src="picitem.images_url" mode="aspectFill"></image>
						</view>
					</view>
				</view>

			</view>

		</view>
		<view style="position: fixed;bottom: 0px; width: 100%;padding: 10px;">
			<u-button type="primary" @click="suerPublish" :disabled="isDisabled">确定</u-button>
		</view>
		<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
			<image :src="h5SaveImg" style="margin: 20px;height: 80%;" mode="widthFix"></image>
			<button class="download" @click="onSaveImg">分享到发微信群和朋友圈</button>
		</view>
		<painter @imgOK="onImgOk" @imgErr="onImgErr" widthPixels="750" :palette="templateJson" v-if="showPost" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import topBox from '../../components/top-box/top-box.vue';
	import painter from '../../components/tuitui-painter/painter.vue';
	import {
		newFileImgeUrl
	} from '@/common/config.js'
	let settingWritePhotosAlbum = false;
	export default {
		components: {
			topBox,
			painter
		},
		data() {
			return {
				loadStatus: 'nomore',
				params: {
					startRow: 1,
					rowSize: 6,
					latitudes: 32,
					longitudes: 43,
					status: 'FB'
				},
				list: [],
				form: {

				},
				subForm: {
					recruit_status: 2,
					link_tel: uni.getStorageSync('userInfo').phone,
					content: '诚信招工，信誉保证。',
					recruit_uid: null
				},
				userId: '',
				recruit_id: 0,
				ID: '',
				rules: {
					link_tel: [{
						required: true,
						message: '联系电话 必填',
						trigger: ['change', 'blur']
					}],
					content: [{
						required: true,
						message: '招聘补充内容 必填',
						trigger: ['change', 'blur']
					}],
				},
				h5SaveImg: '',
				showPost: '',
				templateJson: {},
				wxUserInfo: uni.getStorageSync('wxUserInfo'),
				isDisabled: false
			};
		},
		computed: {
			...mapState({
				// userId: state => state.userId
			})
		},
		onShow() {},
		onLoad(e) {
			this.userId = uni.getStorageSync('userId')
			let token = uni.getStorageSync('token')
			this.form.id = e.recruit_id
			this.recruit_id = e.recruit_id
			console.log(e)
			if (e.id) {
				this.ID = e.id
			}
			this.getDetail();
		},
		onReady() {
			this.$refs.subForm.setRules(this.rules);
		},
		methods: {
			suerPublish() {
				this.isDisabled = true
				this.$refs.subForm.validate(valid => {
					if (valid) {
						this.$u.api.smallSaveOrUpdate({
							...this.subForm,
							recruit_id: this.recruit_id,
							recruit_uid: this.form.recruit_uid,
							id: this.ID || 0
						}).then(res => {

							if (res.status == true) {
								uni.showToast({
									title: res.msg,
									duration: 2000,
								})
								// this.isDisabled = false
								console.log(res)
								// setTimeout(() => {
								// 	uni.switchTab({
								// 		url:'../index/index'
								// 	})
								// }, 2000)
								this.poster(this.recruit_id, res.data)
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						})
					}
				})

			},
			getDetail() {
				// smallGetRecruitInfo  postGetActivityInfo
				let getData
				if (this.ID) {
					getData = this.$u.api.smallGetRecruitInfo({
						id: this.ID,
						userId: uni.getStorageSync('userId')
					})
				} else {
					getData = this.$u.api.postGetActivityInfo({
						id: this.recruit_id,
						userId: uni.getStorageSync('userId')
					})
				}
				getData.then(res => {
					if (res.data) {
						this.form = res.data;
						if (this.ID) {
							this.subForm.content = res.data.content
							this.subForm.link_tel = res.data.link_tel
							this.subForm.recruit_status = '' + res.data.recruit_status
						}
						this.covers = [{
							latitude: res.data.recruit_latitude,
							longitude: res.data.recruit_longitude,
							iconPath: '../../static/image/poi_3.png',
							width: "24",
							height: "33"
						}]
					} else {
						return uni.showToast({
							title: '无数据',
							icon: 'none'
						});
					}
				});
			},
			onImgOk(e) {
				console.log(e)
				// this.tempImg = e.path
				this.h5SaveImg = e.path
				uni.hideLoading()
				this.showPost = false
			},
			onImgErr(e) {
				console.log(e + 'bbbbbbbbbbbbbbbbbbbb')
			},
			poster(recruit_id, item) {
				console.log(item)
				var that = this

				that.$u.api.userGetCord({
					recruit_id: recruit_id,
					id: item.id,
					type: '-1'
				}).then(res => {
					uni.showLoading({
						title: '海报生成中'
					});
					if (res.status == true) {
						console.log(item)

						that.showPost = true
						if (this.form.recruit_pic) {
							item.picURL = this.form.recruit_pic[0].images_url

						} else {
							item.picURL = 'https://lwfd.56ge.com.cn/static/default.jpg'
						}

						that.templateJson = {
							"width": "654px",
							"height": "1000px",
							"background": "#fff",
							"views": [{
									"type": "rect",
									"css": {
										"background": "#cfcdcd",
										"width": "650px",
										"height": "350px",
										"top": "645px",
										"left": "2px",
										"rotate": "0",
										"borderRadius": "0px",
										"shadow": "",
										"color": "#cfcdcd"
									}
								}, {
									"type": "image",
									"url": newFileImgeUrl + res.data,
									"css": {
										"color": "#000000",
										"background": "#ffffff",
										"width": "250px",
										"height": "250px",
										"top": "379px",
										"left": "1px",
										"rotate": "0",
										"borderRadius": "10px",
										"mode": 'auto'
									}
								},
								{
									"type": "image",
									"url": item.picURL,
									"css": {
										"width": "654px",
										"height": "350px",
										"top": "0px",
										"left": "0px",
										"rotate": "0",
										"borderRadius": "10px",
										"borderWidth": "",
										"borderColor": "#000000",
										"shadow": "10 10 10 #888888",
										"mode": "auto"
									}
								}, {
									"type": "rect",
									"css": {
										"background": "#CC0000",
										"width": "380px",
										"height": "130px",
										"top": "440px",
										"left": "260px",
										"rotate": "0",
										"borderRadius": "10px",
										"shadow": "",
										"color": "#CC0000"
									}
								}, {
									"type": "text",
									"text": "——真诚招聘  拒绝套路——",
									"css": {
										"width": "400px",
										"height": "300px",
										"top": "380px",
										"left": "260px",
										"fontSize": "30px",
										"fontWeight": "bold",
									}
								}, {
									"type": "text",
									"text": that.subForm.content,
									"css": {
										"width": "652px",
										"height": "70px",
										"top": "645px",
										"left": "10px",
										"padding": '10px',
										"fontSize": "55px",
										"fontWeight": "bold",
										"color": 'red',
										"maxLines": "2",
										"textDecoration": "none",
										"textAlign": "center",
									}
								}, {
									"type": "text",
									"text": "--------------------------------------------------",
									"css": {
										"width": "650px",
										"height": "10px",
										"top": "750px",
										"left": "2px",
										"fontSize": "30px",
										"fontWeight": "normal",
									}
								}, {
									"type": "text",
									"text": that.form.recruit_requirement,
									"css": {
										"width": "650px",
										"height": "300px",
										"top": "780px",
										"left": "10px",
										"fontSize": "20px",
										"fontWeight": "normal",
										"maxLines": "4",
										"lineHeight": "50px",
										"textStyle": "fill",
										"textDecoration": "none",
										"fontFamily": "",
										"textAlign": "left"
									}
								}, {
									"type": "image",
									"url": that.wxUserInfo.avatarUrl,
									"css": {
										"width": "100px",
										"height": "100px",
										"top": "450px",
										"left": "265px",
										"rotate": "0",
										"borderRadius": "100px",
										"mode": "scaleToFill"
									}
								}, {
									"type": "text",
									"text": that.wxUserInfo.nickName,
									"css": {
										"width": "250px",
										"height": "320px",
										"top": "490px",
										"left": "380px",
										"color": 'white',
										"fontSize": "30px",
										"fontWeight": "normal",
										"maxLines": "1",
										"textStyle": "fill",
										"textDecoration": "none",
										"fontFamily": "",
										"textAlign": "center"
									}
								},
								{
									"type": "text",
									"text": "联系电话：" + that.subForm.link_tel,
									"css": {
										"width": "350px",
										"height": "320px",
										"top": "530px",
										"left": "380px",
										"fontSize": "20px",
										"fontWeight": "normal",
										"textStyle": "fill",
										"textDecoration": "none",
										"fontFamily": "",
										"textAlign": "center"
									}
								}, {
									"type": "text",
									"text": "项目地址：",
									"css": {
										"width": "100px",
										"height": "300px",
										"top": "600px",
										"left": "260px",
										"fontSize": "20px",
										"fontWeight": "bold",
										"textStyle": "fill",
										"textDecoration": "none",
										"fontFamily": "",
										"textAlign": "center"
									}
								}, {
									"type": "text",
									"text": that.form.recruit_area,
									"css": {
										"width": "255px",
										"height": "300px",
										"top": "600px",
										"left": "360px",
										"fontSize": "20px",
										"fontWeight": "normal",
										"textStyle": "fill",
										"textDecoration": "none",
										"fontFamily": "",
										"textAlign": "center"
									}
								},
							]
						}
					}
				})

			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				imgUrl = this.h5SaveImg
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '海报下载中'
				});
				if (settingWritePhotosAlbum) {
					uni.getSetting({
						success: res => {
							if (res.authSetting['scope.writePhotosAlbum']) {
								uni.saveImageToPhotosAlbum({
									filePath: imgUrl,
									success: () => {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
											success: () => {
												uni.switchTab({
													url: './index'
												})
											}
										});
									}
								});
							} else {
								uni.showModal({
									title: '提示',
									content: '请先在设置页面打开“保存相册”使用权限',
									confirmText: '去设置',
									cancelText: '算了',
									success: data => {
										if (data.confirm) {
											uni.hideLoading();
											uni.openSetting();
										}
									}
								});
							}
						}
					});
				} else {
					settingWritePhotosAlbum = true;
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							uni.saveImageToPhotosAlbum({
								filePath: imgUrl,
								success: () => {
									uni.hideLoading();
									uni.showToast({
										title: '保存成功',
										success: () => {
											uni.switchTab({
												url: './index'
											})
										}
									});
								}
							});
						}
					});
				}
				// #endif
				// #ifdef APP-PLUS
				uni.showLoading({
					title: '海报下载中'
				});
				uni.saveImageToPhotosAlbum({
					filePath: imgUrl,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功'
						});
					}
				});
				// #endif
			},
		}
	};
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		.tips {
			margin: 20upx;
			padding: 20upx;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			background-color: #FFFFFF;
		}

		position: relative;

		.publish_btn {
			margin: 20upx;
		}

		.list-wrap {
			padding: 0 20upx 20upx;
			position: relative;
			z-index: 10;

			.list-item {
				padding: 30upx 20upx 10upx;
				background: #fff;
				box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
				border-radius: 6px;
				margin-bottom: 50px;

				.item-title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 24upx;

					.name {
						font-size: 30upx;
						font-weight: bold;
						color: rgba(101, 101, 101, 1);
					}

					.price {
						font-size: 26upx;
						font-weight: bold;
						color: rgba(236, 71, 21, 1);
					}
				}

				.item-con {
					border-bottom: 1px solid rgba(221, 221, 221, 1);
					margin-bottom: 10upx;
					padding-bottom: 10upx;

					.con-row {
						display: flex;
						font-size: 24upx;
						font-weight: 500;
						color: rgba(101, 101, 101, 1);
						line-height: 34upx;
						margin-bottom: 18upx;

						.txt {
							flex: none;
							color: #999;
							margin-right: 10upx;
						}

						.txt-info {
							flex: 1;
						}
					}

					.flex-row {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.row {
							font-size: 24upx;
							font-weight: 500;
							color: rgba(153, 153, 153, 1);
							margin-bottom: 18upx;
						}
					}

					.img-box {
						flex: 1;
						margin-right: 20upx;

						.img {
							width: 90upx;
							height: 90upx;
							border-radius: 6px;
							margin-right: 10upx;
						}
					}
				}

				.light {
					color: #333;
					margin: 0 6upx;
				}
			}
		}
	}

	.bottom {
		padding: 20upx;
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}

	.h5_press_save {
		background-color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		z-index: 100;

		image {
			width: 100%;
		}

		.download {
			font-size: 24rpx;
			color: #ffffff;
			background-color: #E04110;
			display: flex;
			align-items: center;
			flex-direction: row;
			justify-content: center;
			position: absolute;
			padding: 5rpx 30rpx;
			border-radius: 40rpx;
			bottom: 15%;
			left: 50%;
			transform: translateX(-50%);


		}
	}
</style>
